<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" />
  <!-- 引入 ElementUI 样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 引入 ElementUI 组件库，会注入全局变量 -->
  <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
  <script type="text/javascript" src="jquery.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="jquery.timelinr-0.9.4.js" type="text/javascript"></script>
  <script src="/node_modules/_axios@0.21.1@axios/dist/axios.js"></script>
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
  <script src="echarts.js"></script>
</head>

<style>
  body,
  h1,
  h2 {
    font-family: "Raleway", sans-serif;
  }

  body,
  html {
    height: 100%;
  }

  p {
    line-height: 2;
  }

  .bgimg,
  .bgimg2 {
    min-height: 100%;
    background-position: center;
    background-size: cover;
    opacity: 0.95;
  }

  .bgimg {
    background-image: url("assets/bg1.jpg");
    height: 450px;
    width: 100%;
    /* width: 100%; */
    /* height: 0;  */
    /* padding-bottom: 50%; */
    overflow: hidden;
  }

  .bgimg2 {
    background-image: url("assets/bg2.jpeg");
  }
</style>

<body>
  <div id="app">
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <!-- Header / Home-->
            <header class="bgimg" id="home">
              <!-- <div class="w3-display-middle w3-text-white w3-center">
                <h1 class="w3-jumbo">党史人物事件可视化</h1>
              </div> -->
            </header>
        </el-col>
    </el-row>



    <!-- Navbar (sticky bottom) -->
    <div class="w3-bottom w3-hide-small">
      <div class="
            w3-bar
            w3-white
            w3-center
            w3-padding
            w3-opacity-min
            w3-hover-opacity-off
          ">
        <a href="#home" style="width: 25%" class="w3-bar-item w3-button">Home</a>
        <a href="#us" style="width: 25%" class="w3-bar-item w3-button">TimeLine</a>
        <a href="#wedding" style="width: 25%" class="w3-bar-item w3-button">GeoMap</a>
        <a href="#network" style="width: 25%" class="w3-bar-item w3-button w3-hover-black">RelationNet</a>
      </div>
    </div>

    <!-- About / Jane And John -->
    <div class="w3-container w3-center bgimg2" id="us">
      <h1 class="w3-center w3-text-grey"><b>党史历程</b></h1>
      <el-row type="flex" justify="center">
        <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
          <div id="page">
            <button style="padding: 3px;" @click="changeMode">自动循环播放</button>
            <!-- <div class="demotips"><a href="index.html">演示一</a><a href="demo2.html">演示二</a></div> -->
            <div id="container" class="content clearfix">
              <div id="timeline">
                <ul id="dates">
                  <li v-for="(item,index) in event_list_data" :key="index">
                    <a :href="'#'+getYear(item.time)"
                      @click="updateData(item, index)"><span>{{getYear(item.time)}}</span></a>
                  </li>
                  <!-- <li><a href="#1990" onclick="console.log(90)">1900</a></li> -->
                </ul>
                <ul id="issues">
                  <li v-for="(item,index) in event_list_data" :key="index" :id="item.time">
                    <img :src="getImagePath(item)" width="188" height="224" />
                    <h1>{{item.events}}</h1>
                    <p>{{item.bref}}</p>
                  </li>

                  <!-- <li id="1900">
                <img src="images/1.png" width="256" height="256" />
                <h1>1900</h1>
                <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
              </li> -->
                </ul>
                <div id="grad_left"></div>
                <div id="grad_right"></div>
                <a href="#" id="next">+</a>
                <a href="#" id="prev">-</a>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- Background photo -->
    <!-- <div class="w3-display-container bgimg2">
    <div class="w3-display-middle w3-text-white w3-center">
      <h1 class="w3-jumbo">You Are Invited</h1>
      <br />
      <h2>Of course..</h2>
    </div>
  </div> -->

    <!-- Wedding information -->
    <div class="
          w3-container w3-center bgimg2
        " id="wedding">
      <h1 class="w3-text-grey"><b>党史地图</b></h1>
      <el-row type="flex" justify="center">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div id="mapcontainer"></div>
        </el-col>
      </el-row>
      <div class="w3-content"></div>
    </div>

    <!-- RSVP section -->
    <div class="w3-container w3-center bgimg2" id="network">
      <h1>党史人物关系</h1>
      <el-row type="flex" justify="center">
        <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
          <div id="net"></div>
        </el-col>
      </el-row>
    </div>

    <!-- Footer -->
    <footer class="w3-center w3-black w3-padding-16 ">
      <p>
        Powered by
        <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank"
          class="w3-hover-text-green">w3.css</a>
      </p>
    </footer>
    <div class="w3-hide-small" style="margin-bottom: 32px"> </div>
  </div>
</body>

<script src="vueMain.js"></script>

</html>